<template>
	<view class="patient-content">
		<view class="patient-content-switch">
			<view class="uni-flex-item" :class="{selection:isActive}" @tap="selection(0)">待回访</view>
			<view class="uni-flex-item" :class="{selection:!isActive}" @tap="selection(1)">已回访</view>
		</view>
		<view class="patient-box-list">
			<s-pull-scroll ref="pullScroll" :back-top="true" :pullDown="pullDown" :pullUp="loadData">
				<view class="patient-box-item" v-for="(item,index) in dataList" :key="index" @tap="returnVisit_details(item.id)">
					<view class="patient-item-portrait">
						<image src="../../../static/public/portrait02.png" mode="scaleToFill"></image>
					</view>
					<view class="patient-item-information">
						<view class="patient-information-text">
							<view><text class="name">{{item.customerName}}</text><text>{{item.customerAge}}岁 - {{changeType(item.customerSex)}}</text></view>
							<view class="color-shallow">{{item.customerPhone}}</view>
						</view>
						<view class="patient-information-btn">
							<text class="cuIcon-favorfill"></text>
						</view>
					</view>
				</view>
			</s-pull-scroll>
		</view>
	</view>
</template>

<script>
	import sPullScroll from '@/components/s-pull-scroll/index.vue';
	import { rvCustomerList } from '@/static/api/returnVisit.js'
	export default {
		components: {
		  sPullScroll
		},
		data() {
			return {
				isActive:true,
				dataList:[],	// 存放回访列表数组
				parame:{
					arrivalTime: "",	// 页面顶部或底部记录的到店时间
					refreshType: "",	// up:上拉,down:下拉
					revisitStatus: 1,	// 1 待计划 2 回访完成 3 未完成 4 取消
					roleName: "doctor",	// 角色名称(doctor,tc)
					selectedDept: "",	// 选择的门诊
					simpleName: ""		// 门诊简称
				}
			};
		},
		onReady(){
			let _this = this
			//	取出存在 cookie 里面 abbreviation(门店缩写) , outpatientSimple(门店汉字简写)
			uni.getStorage({
			    key: 'userInfo',
			    success: function (res) {
					_this.parame.selectedDept = res.data.outpatientShrink;
					_this.parame.simpleName = res.data.outpatientSimple;
					//	默认请求最新的数据
					rvCustomerList(_this.parame).then((res)=>{
						_this.dataList = res.data;
					}).catch((err)=>{});
			    }
			});
		},
		methods: {
			onNavigationBarButtonTap(val) {
                if (val.index == 0) {
                    uni.navigateTo({
						url: `/pages/index/returnVisit/returnVisit-condition`,
					})
                }
			},
			selection(type) {	// 待计划 or 已回访
				if(type == 0){
					this.isActive = true;
					this.parame.revisitStatus = 1; // 待计划
				}else if(type == 1){
					this.isActive = false;
					this.parame.revisitStatus = 2; // 已回访
				}
				//	切换状态需要清空这两个参数
				this.parame.refreshType = "";
				this.parame.arrivalTime = "";
				rvCustomerList(this.parame).then((res)=>{
					this.dataList = res.data
				}).catch((err)=>{});
			},
			//	下拉刷新
			pullDown (pullScroll) {
				this.returnVisitLoad('down',pullScroll);
			},
			//	上拉加载
			loadData (pullScroll) {
				this.returnVisitLoad('up',pullScroll);
			},
			//	刷新数据
			returnVisitLoad(type,pullScroll){
				//	判断操作 up(上拉) or  down(下拉)
				if(type == 'up'){
					this.parame.refreshType = 'up';
					this.parame.arrivalTime = this.dataList[this.dataList.length-1].arrivalTime
				}else if(type == 'down'){
					this.parame.refreshType = 'down';
					this.parame.arrivalTime = this.dataList[0].arrivalTime
				}
				//	设置延迟  优化用户UI体验
				setTimeout(() => {
					//	请求数据
				    rvCustomerList(this.parame).then((res)=>{
						//	判断有无数据
						if(res.data !== '' && res.data !== undefined){
							//	判断状态  如果是上拉则往 dataList 后面添加数据 下拉则反之
							if(type == 'up'){
								this.dataList = this.dataList.concat(res.data);
							}else if(type == 'down'){
								this.dataList = res.data.concat(this.dataList);
							}
						}
						pullScroll.success();
					})
				}, 500);
			},
			//	根据后台返回的数字转换性别
			changeType(type){
				return type == 1 ? "女" : type==2 ? '男' : '';
			},
			// 回访详情
			returnVisit_details(ids){
				uni.navigateTo({
					url: `/pages/index/returnVisit/returnVisit-details?id=`+ids+``,
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	.patient-content{
		background-color: #FFFFFF;
		height: 100%;
	}
	.patient-content-switch{
		display: flex;
		text-align: center;
		
		.uni-flex-item{
			border-bottom: 2rpx solid #cccccc;
			padding: 20rpx 0;
		}
		
		.selection{
			border-bottom:2rpx solid #8abaff;
			color:#8abaff;
		}
	}
	
	.patient-box-list{
		padding: 20rpx 20rpx 10rpx;
		height: calc(100% - 92rpx);
		overflow: auto;
	}
	
	.patient-box-item{
		border-bottom:2rpx solid #eeeeee;
		padding:24rpx 10rpx;
		display: flex;
		
		.patient-item-portrait{
			width: 140rpx;
			height: 100rpx;
			
			image{
				width: 100rpx;
				height: 100rpx;
			}
		}
		
		.patient-item-information{
			flex: 1;
			display: flex;
			align-items:center;
			
			.patient-information-text{
				flex: 1;
				
				.name{
					font-size: 16px;
					padding-right: 20rpx;
				}
				
				.color-shallow{
					color: #868686;
				}
			}
			
			.cuIcon-favorfill{
				font-size: 24px;
				color: #868686;
			}
		}
	}
</style>
